<!DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="utf-8">
	<meta name="description" content="Miminium Admin Template v.1">
	<meta name="author" content="Isna Nur Azis">
	<meta name="keyword" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Miminium</title>
 
    <!-- start: Css -->
    <link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">

      <!-- plugins -->
      <link rel="stylesheet" type="text/css" href="asset/css/plugins/font-awesome.min.css"/>
	<link href="asset/css/style.css" rel="stylesheet">
	<!-- end: Css -->

 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	
	
  <link rel="stylesheet" href="asset/css/jquery.ui.min.css">
 <style> 
	.backDiv{
		background-color:#99CCFF
	}
	td{
		padding:7px !important
	}
 
 </style>
  
  </head>

 
<body id="mimin" class="dashboard" style=" overflow-x:hidden;">
      <!-- start: Header -->
        <nav class="navbar navbar-default header navbar-fixed-top">
          <div class="col-md-12 nav-wrapper">
            <div class="navbar-header" style="width:100%;">
              <ul class="nav navbar-nav navbar-right user-nav">
                <li class="user-name"><span>360度客户全景视图</span></li>
                  <li class="dropdown avatar-dropdown">
                   <img src="asset/img/airplane65.png" class="img-circle avatar" alt="user name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"/>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      <!-- end: Header -->

      <div class="container-fluid mimin-wrapper">
   


  	<div id="content" style="padding-left: 0px; padding-right: 0px;">
      <div class="col-md-12 col-xs-12 col-sm-12 padding-0" style="margin-top:20px;">
             <div class="col-md-6 col-sm-12 col-xs-12">
              <div class="panel" style="height:150px">
                   <table class="table"   style="border:0">
					  <tr>
						<td style="width:210px">
								<span class="fa fa-search icon-search" style="font-size:23px;"></span>
								<input type="text" id="input_name_card" class="form-control border-bottom" style="display:inline;width:160px" placeholder="请输入姓名或证件号">
						</td>
						<td style="width:100px">
							 <img src="asset\img\avatar.jpg" style="width:100px;height:100px;">
						</td>
						<td>
							 <table style="border:0" class="table" frame=void>
								<tr>
									<td>
										<lable style="font-size:22px" id="t_name"></lable></br>
										<lable id="t_sex">女士</lable>
									</td>
									<td id="">生月</br>
										<lable style="font-size:15px" id="t_birthday"></lable>
									</td>
									<td id="">城市</br>
										<lable style="font-size:15px" id="t_city"></lable>
									</td>
								</tr>
								<tr>
									<td id="">手机</br>
										<lable style="font-size:15px" id="t_phone"></lable>
									</td>
									<td id="" colspan="2">邮件</br>
										<lable style="font-size:15px" id="t_email"></lable>
									</td>
								 
								</tr>
							 </table>
						</td>
					  </tr> 
                   </table>
              </div>
				
				 <div class="panel">		
						<div  style="height:266px;overflow-y:scroll;">
							<lable style="font-size:20px;margin-top:5px;margin-bottom:5px;margin-left:5px">事件</lable>
							<table id="datatables-statistic"   class="table table-striped table-bordered table-td"  cellspacing="0"  cellpadding=“0">
								 <thead>
									<tr>
										<th width="22%">datetime</th>
										<th width="14%">type</th>
										<th width="14%">subtype</th>
										<th>content</th>
									</tr>
								</thead>
								
								<tbody id="events" >
								
								</tbody>
							</table>
						</div>
                 </div>
			  
			  
			  
                    <div class="panel">
						<div  style="height:260px;overflow-y:scroll;">
							<lable style="font-size:20px;margin-top:5px;margin-bottom:5px;margin-left:5px">行程</lable>
							<table   class="table table-striped table-bordered"  style="cellpadding:30px">
								<thead>
								<tr>
									<th width="22%">datetime</th>
									<th width="7%">dept</th>
									<th width="7%">dest</th>
									<th width="12%">source</th>
									<th width="7%">status</th>
									<th width="7%">class</th>
									<th width="10%">cost</th>
									<th>note</th>
								</tr>
								</thead>
								<tbody id="xingcheng">
								 
								</tbody>
							</table>
						</div>
                    </div>
					
          
            </div>
			
			
            <div class="col-md-6 col-sm-12 col-xs-12 padding-0">
				<div class="panel">
				
				<div style="display:block;height:30px;margin-bottom:35px">
					<div style="font-size:17px;margin-bottom:35px;margin-left:10px;">旅客价值指数</div> 
					<div class="progress progress-mini" style="margin-left:10px;">
                                <div class="progress-bar progress-bar-info" role="progressbar"  aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
								<div id="jzzs" style="position:absolute;margin-top:-40px;left:1%;">
										<div><div id="jzzs_tip" >高于0%的客户</div><img src="asset/img/1192137.png" style="width:13px;height:20px"></div>
								</div>									
                    </div>
				</div>	
			<div style="margin-top:50px">
					<div style="margin-top:10px">
						<div style="display:inline-block;margin-left:10px;width:60px;vertical-align:middle;text-align:center;">
							<img src="asset/img/round5.png" style="width:25px;height:25px;vertical-align:middle"><div style="font-size:5px">receny</div>
						</div>
						<div id="div_recency" style="display:inline-block;text-align:center;width:85%;vertical-align:middle;">
							<div style="display:inline-block;width:20%;line-height:25px;float:left;border:1px solid #000">7天</div>
							<div style="display:inline-block;width:20%;line-height:25px;float:left;border:1px solid #000">30天</div>
							<div style="display:inline-block;width:20%;line-height:25px;float:left;border:1px solid #000">90天</div>
							<div style="display:inline-block;width:20%;line-height:25px;float:left;border:1px solid #000">一年</div>
							<div style="display:inline-block;width:20%;line-height:25px;float:left;border:1px solid #000">一年以上</div>
						</div>
					</div>
					
					<div style="margin-top:10px">
						<div style="display:inline-block;margin-left:10px;width:60px;vertical-align:middle;text-align:center;">
							<img src="asset/img/pen.png" style="width:25px;height:25px;vertical-align:middle"><div style="font-size:5px">frequency</div>
						</div>
						<div id="div_frequency" style="display:inline-block;text-align:center;width:85%;vertical-align:middle;">
							<div style="display:inline-block;width:25%;line-height:25px;float:left;border:1px solid #000">每周1-2次</div>
							<div style="display:inline-block;width:25%;line-height:25px;float:right;float:left;border:1px solid #000">每月1-2次</div>
							<div style="display:inline-block;width:25%;line-height:25px;float:right;float:left;border:1px solid #000">每季1-2次</div>
							<div style="display:inline-block;width:25%;line-height:25px;float:left;border:1px solid #000">每年1-2次</div>
						</div>
					</div>
					
					 
					

					<div id="monetary_d" style="margin-top:10px;height:100px">
						
					</div>
					
					
					
					
					</div>
					
					
                  <div style="margin-top:50px;">
					<div style="display:inline-block;width:220px">
							  <center>
							  <canvas class="pie-chart"></canvas>
							  </center>
						   <div class="panel-heading-white panel-heading text-center">
							高仓位占比
						  </div>
                    </div>
					
					<div style="display:inline-block;width:220px">
					 
							  <center>
							  <canvas class="pie-chart"></canvas>
							  </center>
					 
						   <div class="panel-heading-white panel-heading text-center">
							 常用服务分布 
						  </div>
                    </div>
					
					<div style="display:inline-block;width:220px">
							  <center>
							  <canvas class="pie-chart"></canvas>
							  </center>
						   <div class="panel-heading-white panel-heading text-center">
							 客户满意度 
						  </div>
                    </div>
					
					</div>
					
					<div style="margin-top:40px;margin-left:5px;height:260px;">
						<div style="display:inline-block;width:49%;">
						
                     
                              <center>
								<canvas class="bar-chart"></canvas>
							  </center>
                         
							   <div class="panel-heading-white panel-heading text-center">
								 旅客按月消费
							  </div>
						</div>
						
						<div style="margin-top:20px;display:inline-block;width:50%">
							  <center>
								<canvas class="bar-chart"></canvas>
							  </center>
							   <div class="panel-heading-white panel-heading text-center">
								 目的地分布
							  </div>
						</div>
					</div>
				</div>
			</div>
        </div>
  	</div>

        
          
      </div>
 
      <button id="mimin-mobile-menu-opener" class="animated rubberBand btn btn-circle btn-danger">
        <span class="fa fa-bars"></span>
      </button>
       <!-- end: Mobile -->

<!-- start: Javascript -->
<script src="asset/js/jquery.min.js"></script>
<script src="asset/js/jquery.ui.min.js"></script>
<script src="asset/js/bootstrap.min.js"></script>
   
    
    <!-- plugins -->
    <script src="asset/js/plugins/moment.min.js"></script>
    <script src="asset/js/plugins/jquery.sparkline.min.js"></script>
    <script src="asset/js/plugins/jquery.nicescroll.js"></script>
 <script src="asset/js/jquery.ui.min.js"></script>
  <script src="asset/js/plugins/moment.min.js"></script>
    <script src="asset/js/plugins/chart.min.js"></script>
	    <script src="asset/code/highcharts.js"></script>
		    <script src="asset/code/modules/exporting.js"></script>
  <script src="asset/data/dashboard-mock.js"></script>
   <script src="asset/data/customer-analytics.js"></script>
    <!-- custom -->
     <script src="asset/js/main.js"></script>
     <script type="text/javascript">
      var mdraw = 0;
      (function(){
		var imgColors=["#F0E68C","#BBE0E9","#B4EEB4","#A2B5CD","#4ED18F"];
		//人员信息
		var mapInfo = new Map();
		//table集合
		var mapAnalyties = new Map();
		var availableTags = [];
		var analytiesData = [];
		//初始mock
		$.each(customers,function(i,data){
			mapInfo.set(data.name,data);
			if(analyties[i]!=undefined){
				mapAnalyties.set(data.name,analyties[i]);
			}
			availableTags[i]=data.name;
		});
		 
		 
		 
		 
		  	 
	   var chart = {
			type: 'bar'
		};
	   var title = {
		  text: null  
	   };
	   var subtitle = {
		  text: null
	   };
	   var xAxis = {
		  categories: ['monetary'],
		  title: {
			 text: null
		  }
	   };
	   var yAxis = {
		  min: 0,
		  title: {
			 text: null,
		  }
		  
	   };
	   var tooltip = {
		  valueSuffix: '%'
	   };
	   var plotOptions = {
		  bar: {
			 dataLabels: {
				enabled: true
			 }
		  },
		  series: {
			 stacking: 'normal'
		  }
	   };
	   var legend = {
		  x: 40,
		  y: 50,
		  floating: true,
		  borderWidth: 1,
		  backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
		  shadow: true
	   };
	   var credits = {
		  enabled: false
	   };
   
	    
      
	   var json = {};   
	   json.chart = chart; 
	   json.title = title;   
	   json.subtitle = subtitle; 
	   json.tooltip = tooltip;
	   json.xAxis = xAxis;
	   json.yAxis = yAxis;  
	   json.plotOptions = plotOptions;
	   json.legend = legend;
	   json.credits = credits;
 
		//$('#container').highcharts(json);
   
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		
		
		var auto=$("#input_name_card").autocomplete({
		  source: availableTags,
		  select: function( event, ui) {
				//仓位
				var gaoClass=0;
				var diClass=0;
		  
				//服务计算
				var mapService={};
				//满意度计算
				var mapManYi={};
				//旅客按月消费
				var mapXiaoFei={};
				//目的地分布
				var mapMuDiDi={};
				
				
				$("#xingcheng").empty();
				$("#events").empty();
		  
				var jsonInfo= mapInfo.get(ui.item.label);
				$("div").removeClass("backDiv");
				
				
				//旅客价值指数start
				var jzzs = jsonInfo.values.index;
				$("#jzzs").attr("style","position:absolute;margin-top:-40px;"+"left:"+jzzs+"%");
				$("#jzzs_tip").text("高于"+jzzs+"的客户");
					
					
				//三个tab切换	
				var infoName=ui.item.label;
				var tab=mapAnalyties.get(infoName);
				
				$.each(tab,function(key,data){
					var totalV=0;
					 $.each(data,function(ik,vd){
							totalV = totalV+vd.value;	 
					});
				  
					
					if(key=="monetary"){
						  var series= [];   
						  $.each(data,function(ik,vd){
								var resultV=(vd.value/totalV*100).toFixed(2);
								var ss={};
								var dv=new Array;
								dv.push(parseInt(resultV));
								ss.name=vd.key;
								ss.data=dv;
								series[ik]=ss;
						  });
						 json.series = series;
						 $('#monetary_d').highcharts(json);
					} 
					
				 
					 
				
				});
				
				
				$.each(jsonInfo,function(key,value){
					 $("#t_"+key).text(value);
					 if(key=="trips"){
						var trips = value;
						$.each(trips,function(i,data){
							var tr=$("<tr>");
							var datetime=$("<td>",{html:data.datetime});
							var dept=$("<td>",{html:data.dept});
							var dest=$("<td>",{html:data.dest});
							var source=$("<td>",{html:data.source});
							var status=$("<td>",{html:data.status});
							var classs=$("<td>",{html:data.class});
							var note=$("<td>",{html:data.note});
							var cost=$("<td>",{html:data.cost});
							tr.append(datetime).append(dept).append(dest).append(source).append(status).append(classs).append(cost).append(note)
							$("#xingcheng").append(tr);
							
							//仓位计算
							if(data.class=="A" || data.class=="B" || data.class=="C"){
								gaoClass=gaoClass+1;
							}else{
								diClass=diClass+1;
							}
							
							//旅客按月消费
							var xiaofeitotal=0;
							$.each(mapXiaoFei,function(){
								xiaofeitotal++;
							});
							if(xiaofeitotal<6){
								var dateF=data.datetime.substr(0,7);
								if(mapXiaoFei[dateF]==undefined){
									mapXiaoFei[dateF]=0;
								}
								mapXiaoFei[dateF] = mapXiaoFei[dateF]+data.cost;
							};
							
							//目的地分布计算
							if(mapMuDiDi[data.dest]==undefined){
									mapMuDiDi[data.dest]=0;
							}
							mapMuDiDi[data.dest] = mapMuDiDi[data.dest]+1;
							
						});
					 };
					 
					 if(key=="events"){
						var events = value;
						$.each(events,function(i,data){
							var tr=$("<tr>");
							var datetime=$("<td>",{html:data.datetime});
							var type=$("<td>",{html:data.type});
							var subtype=$("<td>",{html:data.subtype});
							var content=$("<td>",{html:data.content});
							tr.append(datetime).append(type).append(subtype).append(content);
							$("#events").append(tr);
							
							//服务计算
							if(data.type=="客服"){
								if(mapService[data.subtype]==undefined){
									mapService[data.subtype]=0;
								}
								mapService[data.subtype] = mapService[data.subtype]+1;
							}
							
							//满意度计算
							if(data.subtype=="满意度"){
								if(mapManYi[data.content.level]==undefined){
									mapManYi[data.content.level]=0;
								}
								mapManYi[data.content.level] = mapManYi[data.content.level]+1;
							}
						});
					 }
				});
				
				

				//高仓位占比
			   var doughnutData1 = [
					{
						value: gaoClass,
						color:"#5BAABF",
						highlight: "#15BA67",
						label: "高仓位"
					},
					{
						value: diClass,
						color: "#BBE0E9",
						highlight: "#15BA67",
						label: "低仓位"
					}
				];
				
				var ctx2 = $(".pie-chart")[0].getContext("2d");
				window.myPie = new Chart(ctx2).Pie(doughnutData1, {
					responsive : true,
					showTooltips: true
				});
				
				//常用服务分布
				var arrayService=new Array
				var total=0;
				$.each(mapService,function(key,value){
					var service ={
						value: value,
						color: imgColors[total],
						highlight: "#15BA67",
						label: key
					}
					arrayService.push(service);
					total++;
				});
				
				var ctx2 = $(".pie-chart")[1].getContext("2d");
				window.myPie = new Chart(ctx2).Pie(arrayService, {
					responsive : true,
					showTooltips: true
				});
				
				
				//满意度调查
				var arrayManYi=new Array
				var totalM=0;
				$.each(mapManYi,function(key,value){
					var service ={
						value: value,
						color: imgColors[totalM],
						highlight: "#15BA67",
						label: key
					}
					arrayManYi.push(service);
					totalM++;
				});
				
				
				var ctx2 = $(".pie-chart")[2].getContext("2d");
				window.myPie = new Chart(ctx2).Pie(arrayManYi, {
					responsive : true,
					showTooltips: true
				});
				
				//旅客按月消费
				var labelsxiaofei=new Array;
				var xiaofeidata=new Array;
				$.each(mapXiaoFei,function(k,v){
					labelsxiaofei.push(k);
					xiaofeidata.push(v);
				})
				var barData = {
					labels: labelsxiaofei,
					datasets: [
						{
							fillColor: "rgba(21,113,186,0.5)",
							strokeColor: "rgba(151,187,205,0.8)",
							data: xiaofeidata
						}
					]
				};
			  
				var ctx4 = $(".bar-chart")[0].getContext("2d");
				window.myBar = new Chart(ctx4).Bar(barData, {
					responsive : true,
					showTooltips: true
				});
	  
	  
				//目的地分布
				
				
				var labelsmudidi=new Array;
				var mudididata=new Array;
				$.each(mapMuDiDi,function(k,v){
					labelsmudidi.push(k);
					mudididata.push(v);
				})
				var barData1 = {
					labels: labelsmudidi,
					datasets: [
						{
							fillColor: "rgba(21,113,186,0.5)",
							strokeColor: "rgba(151,187,205,0.8)",
							data: mudididata
						}
					]
				};
			  
				var ctx4 = $(".bar-chart")[1].getContext("2d");
				window.myBar = new Chart(ctx4).Bar(barData1, {
					responsive : true,
					showTooltips: true
				});
				
				
				
		  }
		});

	
        })();
     </script>
  <!-- end: Javascript -->
  </body>
</html>